<template id="common-ticketBox">
	<!-- 一般的申请 -->
	<v-navigation-drawer class="elevation-24" fixed temporary right width="80%" v-if="isRequestDrawerShown" v-model="isRequestDrawerShown" :permanent="isRequestDrawerShown">
		<v-row>
			<v-col cols="12">
				<v-card elevation="0" outlined>
					<v-data-table class="elevation-0 mt-0 mb-xs-4" :headers="headers" :items="items" hide-default-footer fixed-header>
						<!-- <template v-slot:[action]="{ item }">test</template> -->
						<!-- <template v-slot:[slot.slotname]="{ item }" v-for="slot in slots">
                                  <div>{{slot.type}}{{item.carId}}</div>
                            </template> -->
					</v-data-table>
				</v-card>
			</v-col>
		</v-row>
		<!-- 抽屉关闭按钮 -->
		<v-btn class="drawer-close-float-btn" elevation="0" color="success" fab absolute top left small tile @click="doUiAction('close')">
			<v-icon>mdi-close</v-icon>
		</v-btn>
	</v-navigation-drawer>
</template>
<script type="module">
	Vue.component("common-ticketBox", {
		template: "#common-ticketBox",
		props: {},
		data: () => ({
			isRequestDrawerShown: false,
			// slots:[{
			//     slotname:'item.action',
			//     type:'input'
			// }],
			headers: [
				{
					text: "车牌号",
					value: "carId",
					width: 120,
				},
				{
					text: "车辆颜色",
					value: "carColor",
					width: 120,
				},
				{
					text: "车辆类型",
					value: "carType",
					width: 120,
				},
				{
					text: "客户名称",
					value: "customName",
					width: 120,
					slot: {
						name: "item.customName",
						type: "input",
					},
				},
				{
					text: "客户电话",
					value: "customerPhone",
					width: 120,
					slot: {
						name: "item.customerPhone",
						type: "input",
					},
				},
				{
					text: "提车日期",
					value: "dispatchDateTime",
					width: 120,
					slot: {
						name: "item.dispatchDateTime",
						type: "date",
					},
				},
				{
					text: "提车时间段",
					value: "dispatchDatePeriod",
					width: 120,
					slot: {
						name: "item.dispatchDatePeriod",
						type: "select",
						options: [
							{
								text: "上午",
							},
                            {
								text: "下午",
							},
						],
					},
				},
				{
					text: "合同结束日期",
					value: "contractEndTime",
					width: 120,
                    slot: {
						name: "item.contractEndTime",
						type: "date",
					},
				},
			],
			items: [
				{
					carId: 1,
					carColor: "红色",
					carType: "轿车",
					customName: "cyw",
					customerPhone: "18344561746",
					dispatchDateTime: "2023-08-04",
					contractEndTime: "2024-08-04",
					dispatchDatePeriod: "上午",
				},
			],
		}),
		computed: {
            cSlot(){
                
                return []
            }
        },
		watch: {},
		async created() {},
		async mounted() {},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "close":
						this.close();
						break;
					case "open":
						this.open(uiActionData);
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			open(data) {
				this.isRequestDrawerShown = true;
			},
			close() {
				this.isRequestDrawerShown = false;
			},
		},
	});
</script>
